<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddUIMarker.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {
      let marker = new maptalks.ui.UIMarker(map.getCenter(), {
        "draggable": true,
        "single": false,
        "content": "<div class='img-marker'></div>"
      }).addTo(map).show();
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style lang="less">
.img-marker {
  content: url("/maptalks-test-next/images/hanxue.png");
  object-fit: cover;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  cursor: pointer;
}
</style>
